import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './NotFound.css';

const NotFound = () => {
    const navigate = useNavigate();
    const [countdown, setCountdown] = useState(5); // 初始倒计时为 5 秒

    useEffect(() => {
        // 设置每秒更新一次倒计时
        const timer = setInterval(() => {
            setCountdown((prevCountdown) => prevCountdown - 1);
        }, 1000);

        // 当倒计时结束时，跳转到主页
        if (countdown === 0) {
            navigate('/home');
        }

        // 清除定时器，防止组件卸载时内存泄漏
        return () => clearInterval(timer);
    }, [countdown, navigate]);

    return (
        <div className="notfound-container">
            <h1>404 - 页面未找到</h1>
            <p>抱歉，您访问的页面不存在。</p>
            <Link to="/home" className="notfound-link">立即返回首页</Link>
            <p>{countdown}秒后将自动跳转到主页...</p>
        </div>
    );
};

export default NotFound;